{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/forms/bootstrapvalidator/bootstrapValidator.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationbootstrap/js/forms/bootstrapvalidator/bootstrapValidator.js') }}" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {
		    $('#defaultForm').bootstrapValidator({
		        message: 'This value is not valid',
		        feedbackIcons: {
		            valid: 'glyphicon xglyphicon-ok',
		            invalid: 'glyphicon glyphicon-remove',
		            validating: 'glyphicon glyphicon-refresh'
		        },
		        fields: {
		            firstName: {
		                group: '.group',
		                validators: {
		                    notEmpty: {
		                        message: 'The first name is required and cannot be empty'
		                    }
		                }
		            },
		            lastName: {
		            	group: '.group',
		                validators: {
		                    notEmpty: {
		                        message: 'The last name is required and cannot be empty'
		                    }
		                }
		            },
		            username: {
		                message: 'The username is not valid',
		                validators: {
		                    notEmpty: {
		                        message: 'The username is required and can\'t be empty'
		                    },
		                    stringLength: {
		                        min: 6,
		                        max: 30,
		                        message: 'The username must be more than 6 and less than 30 characters long'
		                    },
		                    regexp: {
		                        regexp: /^[a-zA-Z0-9_\.]+$/,
		                        message: 'The username can only consist of alphabetical, number, dot and underscore'
		                    }
		                }
		            },
		            email: {
		                validators: {
		                    notEmpty: {
		                        message: 'The email address is required and can\'t be empty'
		                    },
		                    emailAddress: {
		                        message: 'The input is not a valid email address'
		                    }
		                }
		            },
		            website: {
		                validators: {
		                    uri: {
		                        allowLocal: true,
		                        message: 'The input is not a valid URL'
		                    }
		                }
		            },
		            password: {
		                validators: {
		                    notEmpty: {
		                        message: 'The password is required and cannot be empty'
		                    },
		                    identical: {
		                        field: 'confirmPassword',
		                        message: 'The password and its confirm are not the same'
		                    },
		                    different: {
		                        field: 'username',
		                        message: 'The password cannot be the same as username'
		                    }
		                }
		            },
		            confirmPassword: {
		                validators: {
		                    notEmpty: {
		                        message: 'The confirm password is required and cannot be empty'
		                    },
		                    identical: {
		                        field: 'password',
		                        message: 'The password and its confirm are not the same'
		                    },
		                    different: {
		                        field: 'username',
		                        message: 'The password cannot be the same as username'
		                    }
		                }
		            },
	                age: {
	                    validators: {
	                        //notEmpty: {},
	                        digits: {},
	                        greaterThan: {
	                            value: 18
	                        },
	                        lessThan: {
	                            value: 100
	                        }
	                    }
	                }, 
		            gender: {
		                validators: {
		                    notEmpty: {
		                        message: 'The gender is required'
		                    }
		                }
		            },
		            birthday: {
		                validators: {
		                    date: {
		                        format: 'YYYY/MM/DD',
		                        message: 'The birthday is not valid'
		                    }
		                }
		            },
		            internetBrowsers: {
		                validators: {
		                    notEmpty: {
		                        message: 'The internet browsers is required and can\'t be empty'
		                    }
		                }
		            },
		            operatingSystem: {
		                validators: {
		                    notEmpty: {
		                        message: 'The operating system is required and can\'t be empty'
		                    }
		                }
		            },
		            'languages[]': {
		                validators: {
		                    notEmpty: {
		                        message: 'Please specify at least one language you can speak'
		                    }
		                }
		            },
		            'programs[]': {
		                validators: {
		                    choice: {
		                        min: 2,
		                        max: 4,
		                        message: 'Please choose 2 - 4 programming languages you are good at'
		                    }
		                }
		            },
		            comment: {
		                validators: {
		                    notEmpty: {
		                        message: 'The commentis required and can\'t be empty'
		                    },
		                    stringLength: {
		                        max: 100,
		                        message: 'The comment must be less than 100 characters long'
		                    }
		                }
		            }
		        }
		    })
		    .on('status.field.bv', function(e, data) {
                // I don't want to add has-success class to valid field container
                data.element.parents('.form-group').removeClass('has-success');

                // I want to enable the submit button all the time
                data.bv.disableSubmitButtons(false);
		    });

		    // Validate the form manually
		    $('#validateBtn').click(function() {
		        $('#defaultForm').bootstrapValidator('validate');
		    });

		    $('#validateBtn2').click(function() {
		        $('#defaultForm').bootstrapValidator('validate');
		    });

		    $('#resetBtn').click(function() {
		        $('#defaultForm').data('bootstrapValidator').resetForm(true);
		    });
		    
		});
	</script>
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>Bootstrapvlidator</h1>
        </div>
        <div class="row">
            <div class="col-sm-offset-2 col-sm-8">
				<form id="defaultForm" class="form-horizontal" role="form" action="{{ path('_validations_bootstrap-vlidations-jQuery') }}" method="post" novalidate>
		
					<div class="form-group">
					    <div class="group">
						    <label class="col-sm-3 control-label">Full name</label>
						    <div class="col-sm-4">
						        <input type="text" class="form-control" placeholder="First name" name="firstName">
						    </div>
					    </div>
					    <div class="group">
						    <div class="col-sm-4">
						        <input type="text" class="form-control" placeholder="Last name" name="lastName">
						    </div>
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Username</label>
					    <div class="col-sm-5">
					        <input type="text" class="form-control" name="username">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Email address</label>
					    <div class="col-sm-5">
					        <input type="email" class="form-control" name="email">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Website</label>
					    <div class="col-sm-5">
					        <input type="url" class="form-control" name="website">
					    </div>
					</div>
					{#
					<div class="form-group">
					    <label class="col-sm-3 control-label">Range</label>
					    <div class="col-sm-5">
					        <input type="range" min="0" max="10" class="form-control" name="range">
					    </div>
					</div>
					#}
					<div class="form-group">
					    <label class="col-sm-3 control-label">Password</label>
					    <div class="col-sm-5">
					        <input type="password" class="form-control" name="password">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Retype password</label>
					    <div class="col-sm-5">
					        <input type="password" class="form-control" name="confirmPassword">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Gender</label>
					    <div class="col-sm-5">
							<div class="radio">
								<label>
								    <input type="radio" name="gender" value="male"> Male
								</label>
							</div>
							<div class="radio">	
								<label>
								    <input type="radio" name="gender" value="female"> Female
								</label>
							</div>
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Age</label>
					    <div class="col-sm-3">
					        <input type="text" class="form-control" name="age">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Birthday</label>
					    <div class="col-sm-5">
					        <input type="text" class="form-control" placeholder="YYYY/MM/DD" name="birthday">
					        <small class="text-muted">The required date format (YYYY/MM/DD)</small>
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Internet browsers</label>
					    <div class="col-sm-5">
					        <select class="form-control" name="internetBrowsers">
					          <option value="">-- Select a internet browsers --</option>
							  <option value="ie">Internet Explorer</option>
							  <option value="firefox">Firefox</option>
							  <option value="chrome">Google Chrome</option>
							  <option value="opera">Opera</option>
							  <option value="other">Other</option>
							</select>
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Operating system</label>
					    <div class="col-sm-5">
					        <select class="form-control" size="4" multiple name="operatingSystem">
							  <option value="dos">Dos</option>
							  <option value="windows">Windows</option>
							  <option value="linux">Linux</option>
							  <option value="other">Other</option>
							</select>
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Languages</label>
					    <div class="col-sm-5">
							<div class="checkbox">
								<label>
								    <input type="checkbox" name="languages[]" value="english"> English
								</label>
							</div>
							<div class="checkbox">	
								<label>
								    <input type="checkbox" name="languages[]" value="french"> French
								</label>
							</div>
							<div class="checkbox">	
								<label>
								    <input type="checkbox" name="languages[]" value="german"> German
								</label>
							</div>
							<div class="checkbox">	
								<label>
								    <input type="checkbox" name="languages[]" value="russian"> Russian
								</label>
							</div>
							<div class="checkbox">	
								<label>
								    <input type="checkbox" name="languages[]" value="other"> Other
								</label>
							</div>
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Programming Languages</label>
					    <div class="col-sm-5">
					               
							<div class="checkbox">
								<label>
								    <input type="checkbox" name="programs[]" value="english"> .Net
								</label>
							</div>
							<div class="checkbox">
								<label>
								    <input type="checkbox" name="programs[]" value="english"> Java
								</label>
							</div>
							<div class="checkbox">
								<label>
								    <input type="checkbox" name="programs[]" value="english"> C/C++
								</label>
							</div>
							<div class="checkbox">
								<label>
								    <input type="checkbox" name="programs[]" value="english"> PHP
								</label>
							</div>
							<div class="checkbox">
								<label>
								    <input type="checkbox" name="programs[]" value="english"> Perl
								</label>
							</div>
							<div class="checkbox">
								<label>
								    <input type="checkbox" name="programs[]" value="english"> Ruby
								</label>
							</div>
							<div class="checkbox">
								<label>
								    <input type="checkbox" name="programs[]" value="english"> Python
								</label>
							</div>
							<div class="checkbox">
								<label>
								    <input type="checkbox" name="programs[]" value="english"> Javascript
								</label>
							</div>
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Comment</label>
					    <div class="col-sm-8">
					        <textarea class="form-control" rows="3" name="comment"></textarea>
					    </div>
					</div>
                    <div class="form-group">
                        <div class="col-lg-9 col-lg-offset-3">
                            <button type="submit" id="validateBtn" class="btn btn-primary">Sign up</button>
                            <button type="button" id="validateBtn2" class="btn btn-primary">Sign up 2</button>
                            <button type="reset" id="resetBtn" class="btn btn-info">Reset form</button>
                        </div>
                    </div>
				</form>
            </div>
        </div>
        
        <div class="row">
			<div class="col-sm-12">
		        <div class="alert alert-success">
		        	<p>Podstawowe typy znacznika input: text, radio, checkbox, password, email, number, url, range, file, reset, submit, file, hidden, image</p>
		        </div>
	        </div>
        </div>
        
    </div> <!-- /container -->
{% endblock %}